<!-- 底部导航 -->
<template>
    <view class="tabbar pf">
        <view class="tabbar_box x-bc">
            <view class="tabbar_item" 
                v-for="(tab, index) in tabbar" :key="tab.name"
                @tap="jump(tab.path,index)"
            >
                <view class="img_box x-c">
                    <image class="tabbar_icon" 
                    :src="index == active  ? tab.activeImage : tab.image"
                    :class="tab.name == '' ? 'index' : '' "
                >
                </image>
                </view>
                <view class="tabbar_text" 
                    v-if="tab.name" 
                    :class="index == active ? 'active' : ''"
                    >
                    {{tab.name}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        data() {
            return {
                tabbar:[
                    {
                        name: "商品",                                    // 标题
                        image: "/static/tab/g0.png",                 // 默认图片
                        activeImage: "/static/tab/g1.png",    // 选中图片
                        path: "/pages/goods_index/index"                      // 跳转路径
                    },
                    {
                        name: "商家",
                        image: "/static/tab/s0.png",
                        activeImage: "/static/tab/s1.png",
                        "path": "/pages/store_index/seller"
                    },
                    {
                        name: "",
                        image: this.imgUrl + "home.png",
                        activeImage: this.imgUrl + "home.png",
                        "path": "/pages/index/index"
                    },
                    {
                        name: "购物车",
                        image: "/static/tab/c0.png",
                        activeImage: "/static/tab/c1.png",
                        "path": "/pages/cart_index/index"
                    },
                    {
                        name: "我的",
                        image: "/static/tab/u0.png",
                        activeImage: "/static/tab/u1.png",
                        "path": "/pages/user_index/index"
                    },
                ],
                active: 2
            }
        },
        computed: {
          
        },
        methods:{
            jump(path,params) {
            	this.$store.commit('init/set_scrollTop', params);
            	this.active = params;
            	this.$emit('toIndex',params)
            }
        },
        created() {
            
        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>
    .tabbar {
        width: 100%;
        bottom: 0;
        background-color: #fff;
        z-index: 998;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
        .tabbar_box {
            padding: 0 54rpx;
        }
    }
    .tabbar_item {
        height: 98rpx;
        .img_box {
            padding-top: 10rpx;
            .tabbar_icon {
                width: 34rpx;
                height: 34rpx;
                padding-bottom: 4rpx;
            }
            .index {
                width: 80rpx;
                height: 80rpx;
            }
        }
        .tabbar_text {
            font-size: 22rpx;
            color: #999;
        }
        .active {
            color: #FF5445;
        }
    }
</style>
